import codemuseLogo from '@/assets/codemuseLogo.png';
import { authorize, callback } from '@/services/login';
import StorageManager from '@/utils/StorageManager';
import { parseQuery } from '@/utils/tools';
import { history } from '@umijs/max';
import { Button, Image, Layout, Typography } from 'antd';
import { useEffect } from 'react';
import styles from './index.less';
const { Header, Content, Footer } = Layout;
const { Title, Paragraph } = Typography;

const Login = () => {
  const search = history.location.search as any;
  const { code } = parseQuery(search);
  console.log('code=>>>>', code);
  const handleLogin = async () => {
    const res = await authorize({});
    console.log('res=>>>>', res);
    if (res && res.data) {
      window.location.href = res.data;
    }
    // window.location.href =
    //   'https://sso.hwwt2.com/openapi/oauth/authorize?response_type=code&client_id=1622&redirect_uri=http%3A%2F%2Fcode-muse.sit.hwwt2.com%2Flogin';
  };

  const handleSSOLogin = async () => {
    const res = await callback({ code });
    console.log('res=>>>>>', res);
    StorageManager.setLocalStorageSync('userName', res.data.ssoaccount);
    if (res.code === 200) {
      history.push('/chat');
    }
  };

  useEffect(() => {
    if (code) handleSSOLogin();
  }, [code]);

  return (
    <div className={styles.loginContent}>
      <Content style={{ flex: 1, display: 'flex' }}>
        <div className={styles.upContainer}>
          <div className={styles.up}>
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                marginBottom: '20px',
              }}
            >
              <Image src={codemuseLogo} width={108} preview={false} />
              <span className={styles.logoTitle}>Codemuse</span>
            </div>
            <span className={styles.subTitle}>从笔尖灵感，到指尖交互</span>
            <span className={styles.text}>
              利用先进的大模型技术，通过直观的对话界面，快速生成高还原度可交互demo
            </span>
            <Button
              className={styles.ssobtn}
              type="primary"
              danger
              size="large"
              onClick={handleLogin}
            >
              SSO一键登录
            </Button>
          </div>
          <div className={styles.loginBj} />
        </div>
      </Content>
      <Footer
        style={{
          textAlign: 'center',
          backgroundColor: 'transparent',
          color: '#999',
        }}
      >
        © 2024 Codemuse. All rights reserved.
      </Footer>
    </div>
  );
};

export default Login;
